import React, { PureComponent } from 'react';
import { NoDataC, CircleChartsC } from '../../../comps';
import { getTextWidth } from '../../../utils/utils';

export default class ChartsPie extends PureComponent {
  render() {
    const { data = [], eChartsType } = this.props;
    // 行业
    const _long = data.some((item) => item.name === '铁路运输');
    const _long2 = data.some((item) => item.name === '大额可转让同业存单');
    let legendTextWidth;
    if (_long) {
      legendTextWidth = 95;
    } else if (_long2) {
      legendTextWidth = 150;
    } else {
      legendTextWidth = 130;
    }
    // console.log('data', data);
    // const aaa = [
    //   { name: '南京', value: '80%' },
    //   { name: '无锡', value: '80%' },
    //   { name: '苏州', value: '80%' },
    //   { name: '常州', value: '80%' },
    //   { name: '南京1', value: '80%' },
    //   { name: '无锡2', value: '80%' },
    //   { name: '苏州3', value: '80%' },
    //   { name: '常州4', value: '80%' },
    //   { name: '南京11', value: '80%' },
    //   { name: '无锡22', value: '80%' },
    //   { name: '苏州33', value: '80%' },
    //   { name: '常州44', value: '80%' },
    //   { name: '南京111', value: '80%' },
    //   { name: '无锡222', value: '80%' },
    //   { name: '苏州333', value: '80%' },
    //   { name: '常州444', value: '80%' },
    //   { name: '南京1111', value: '80%' },
    //   { name: '无锡2222', value: '80%' },
    //   { name: '苏州3333', value: '80%' },
    //   { name: '常州4444', value: '80%' },
    // ];
    // data.push(...aaa);
    return data && data.length ? (
      eChartsType ? (
        <CircleChartsC
          legendType={'scroll'}
          // legendTextWidth={130}
          // legendX={_long ? '60%' : '70%'}
          data={data.map((x) => {
            return {
              ...x,
              value: Math.abs(x.value),
            };
          })}
          center={['40%', 'center']}
          height={366}
          type='ring'
          toolTipFormat={(params) => {
            let value;
            let total = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += Number(data[i].value);
              if (data[i].name == params.name) {
                value = Number(data[i].value);
              }
            }

            const str = `${params.name}: ${value}(${((value / total) * 100).toFixed(2)}%)`;
            return str;
          }}
          legendFormatter={(name) => {
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += Number(data[i].value);
              if (data[i].name == name) {
                tarValue = Number(data[i].value);
              }
            }
            const p = total ? ((tarValue / total) * 100).toFixed(2) : '0.00';
            return `{a|${name}}{b|${p}%}`;
            // return <span>5565456</span>;
            // return `{a|${name.length > 5 ? `${name.slice(0, 4)}...` : name}}{b|${p}%}`;
          }}
          legendRich={true}
        />
      ) : (
        <CircleChartsC
          data={data.map((x) => {
            return {
              ...x,
              value: Math.abs(x.value),
            };
          })}
          center={['40%', 'center']}
          height={366}
          type='ring'
          toolTipFormat={(params) => {
            console.log('params', params);
            let value;
            let total = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += Number(data[i].value);
              if (data[i].name == params.name) {
                value = Number(data[i].value);
              }
            }

            const str = `${params.name}: ${value}(${((value / total) * 100).toFixed(2)}%)`;
            return str;
          }}
          legendFormatter={(name) => {
            let total = 0;
            let tarValue = 0;
            for (let i = 0, l = data.length; i < l; i++) {
              total += Number(data[i].value);
              if (data[i].name == name) {
                tarValue = Number(data[i].value);
              }
            }
            const p = total ? ((tarValue / total) * 100).toFixed(2) : '0.00';
            return `{a|${name}}{b|${p}%}`;

            // return `{a|${name.length > 8 ? `${name.slice(0, 6)}...` : name}}{b|${p}%}`;
          }}
        />
      )
    ) : (
      <NoDataC />
    );
  }
}
